<template>
  <div id="dispatchDriver">
    <div ref="search" class="search vux-1px-t flex flex-middle">
      <div class="flex-auto text-center vux-1px-r" style="margin-right: 0.2rem;">
        <div @click="showCar = true" v-if="!carName">车型车长 <i class="icon icon-down"></i></div>
        <div class="overflowtext" @click="showCar = true" v-if="carName">
          {{carName}}
        </div>
      </div>
      <div class="search-input flex">
        <i class="icon icon-iconmapsearch" style="display: inline-block;"></i>
        <input type="text" class="weui-input" @input="handleSearch" v-model="keyword" placeholder="可输入名称/手机搜索" style="height: 0.5rem; margin-top: 0.1rem; width: 100%; margin-left: 0.15rem; line-height: 0.5rem;font-size: 0.26rem; width: 3rem; border: 0px none; background: none;">
      </div>

    </div>
    <div ref="pensonbox" style="margin-top: 0.1rem; position: relative;">
      <scroller
        :on-refresh="refresh"
        :on-infinite="infinite"
        :noDataText="dataObj.length? '我已经到底了~~': nullMsg"
        style="padding-top: 0rem;">
        <div class="penson" v-for="(item, index) in dataObj" :key="index" v-if="dataObj.length > 0">
          <div class="checkall" @click="handleChecked(index)"><i class="icon" :class="[item.is_check? 'icon-checkall text-orange': 'icon-quan1']"></i></div>
          <div class="headimg" @click="toDriver(item.bid)"><img :src="item.face? item.face: '../../static/img/noheadpic.png'" /></div>
          <div class="flex-auto" @click="toDriver(item.bid)">
            <p class="flex flex-middle">
              <span class="overflowtext" style="font-size: 0.3rem;">{{item.nick_name}}</span>
              <i class="icon icon-gerenrenzheng"></i>
            </p>
            <div class="flex flex-middle">
              <rater disabled v-model="item.comment_score" active-color="#ff9800"></rater>
              <span style="color: #ff9800; margin-left: 0.15rem; font-size: 0.26rem;">{{item.comment_score}}<span style="font-size: 0.24rem;">分</span></span>
            </div>
            <div>
              {{item.car_num}}
              {{ item.car_name}}
              {{ item.car_length}}
              {{ item.car_width}}
            </div>

          </div>
          <div class="other text-orange text-right">
            <a :href="'tel:' + item.phone" class="text-orange"><i class="icon icon-phone"></i></a>
            <p style="margin-top: 0.17rem;"><small>已承运{{item.order_qiang}}次</small></p>
          </div>
        </div>
      </scroller>

      <div v-if="dataObj.length == 0 && count != 0 && !isLoading" class="null">
        <img src="../../static/img/nullshoucang.png" style="width: 3.5rem; height: 2.25rem;">
        <p style="margin-top: 0.5rem;">没有相关司机数据</p>
      </div>

      <div class="fiexd-btn flex flex-middle vux-1px-t" ref="btn">
        <div @click="handleCheckedAll" class="flex flex-middle" style="padding-right: 0.3rem;">
          <i class="icon" :class="[checkall? 'icon-checkall text-orange': 'icon-quan1']"></i>
          <span>全选</span>
        </div>
        <div class="flex-auto">
          <x-button type="primary" action-type="button" @click.native="handleSub">招标调度</x-button>
        </div>
      </div>
    </div>

    <div class="amap-wrapper" :class="{'amap-wrapper-show': showCar}" :style="{minHeight: $store.state.bodyHeiht}">
      <car
        @on-cancle="showCar = false"
        @on-submit="carSub"
        serverid="8"
        @on-clear="carClear"
        type="chengjizhengche"
        :load="showCar"
      ></car>
    </div>
  </div>
</template>
<script>
  import { TransferDom, Rater, LoadMore } from 'vux'
  import { trim } from '../libs/until'
  import { setObjectVal, removeByValue } from '../libs/fn'
  export default{
    name: 'collection',
    props: ['type', 'collectionData','load'],
    components: {
      Rater,
      LoadMore,
      Car: resolve => {require(['../components/realTag/Car.vue'], resolve)}
    },
    computed: {
      serverID() {
        return this.$store.state.userInfo.service_id || 0
      }
    },
    mounted() {
      const bodyHeight = document.documentElement.clientHeight
      const searchHeight = this.$refs['search'].offsetHeight
      const pensonHeight = bodyHeight - searchHeight
      this.$refs['pensonbox'].style.height = pensonHeight + 'px'
    },
    created() {
      this.getData()
    },
    data() {
      return {
        showCar: false,
        carName: '',
        car: { //车辆需求
          value: [],
          name: [],
          id: [],
          type: []
        },
        carLength: { //车型需求
          value: [],
          name: [],
          id: [],
          type: []
        },
        count: 0,
        dataObj: [],
        isLoading: false,
        checkall: false,
        is_collection: false,
        pages: 1,
        page: 1,
        keyword: '',
        end: false,
        push_users: [],
        lar: null,
        code: 0,
        nullMsg: '加载数据中...',
        timeOut: 0
      }
    },
    methods: {
      //车型需求删除已选中
      carClear(v, v1) {
        const data = setObjectVal(v)
        const data1 = setObjectVal(v1)
        this.car = data
        this.carLength = data1
        this.carName = (this.car.name[0] || '') + (this.carLength.name[0] || '')
        this.page = 1
        this.pages = 1
        this.dataObj = []
        this.getData(() => {})
      },
      //车型需求数据回传
      carSub(v, v1) {
        this.carClear(v, v1)
        this.showCar= false
      },
      toDriver(uid) {
        if(uid) {
          this.$router.push({path: '/driverPage', query: {id: uid, service: this.serverID}})
        }
      },
      infinite(done) {
        if(this.page >= this.pages) {
          this.end = true
          done(true)
          return
        }
        if(!this.isLoading) {
          this.isLoading = true
          this.page ++
          this.getData(done)
        }

      },
      refresh(done) {
        this.pages = 0
        this.end = false
        this.page = 1
        setTimeout(() => {
          this.nullMsg = ''
          this.dataObj = []
          this.getData(done(), 'refresh')
        }, 700)

      },

      handleSearch() {
        if(this.code != 1){
          return
        }
        const timeInterval = 500
        const now = new Date().getTime()
        if(now - this.timeOut < timeInterval){
          clearTimeout(this.lar)
        }
        this.timeOut = now
        this.lar = setTimeout(() => {
          this.page = 1
          this.pages = 1
          this.dataObj = []
          this.getData(() => {})
        }, timeInterval)
      },
      getData(done = () => {}) {
        this.isLoading = true
        this.keyword = trim(this.keyword)
        this.checkall = false
        this.$http.post($config.host + '/api/Driver/lists', qs.stringify({
          uid: this.$store.state.userInfo.uid,
          service_id: this.serverID,
          page: this.page,
          client: $config.client_type,
          device: $config.device_type,
          token: this.$store.state.userInfo.token,
          keyword: this.keyword,
          car: this.car.id[0] || '',
          car_length: this.carLength.id[0] || '',
          pagesize: 10
        })).then((res) => {
          const {code, data, msg} = res.data
          this.isLoading = false
          this.nullMsg = ''
          if(code == 1 && data) {
            this.code = code
            this.pages = data.pages
            let newData = []
            data.data.map(item => {
              if(this.push_users.indexOf(item.bid) > -1){
                item.is_check = 1
              }
              newData.push(item)
            })
            console.log(newData)
            this.dataObj = this.dataObj.concat(newData)
          }
          this.count++
        }).catch((err) => {
          this.isLoading = false
          this.is_collection = false
          this.$vux.toast.text($config.errMsg, 'middle')
        })
      },
      //收藏
      handleSub() {
        const { oid } = this.$route.query
        const uri = $config.host + '/api/Inquirycityvehicle/companyChooseDrivers'
        if(this.push_users.length <= 0){
          this.$vux.toast.text('请选择司机', 'middle')
          return
        }
        if(!oid){
          this.$vux.toast.text('订单错误', 'middle')
          return
        }

        this.$vux.loading.show({
          text: '调度司机中'
        })
        this.$http.post(uri, qs.stringify({
          client: $config.client_type,
          device: $config.device_type,
          token: this.$store.state.userInfo.token,
          uid: this.$store.state.userInfo.uid,
          oid,
          other_uid: JSON.stringify(this.push_users)
        })).then((res) => {
          this.$vux.loading.hide()
          const {code, msg} = res.data
          if(code == '1') {
            this.$router.push({path: '/order'})
            this.$vux.toast.text('招标已发送，等待司机来报价', 'middle')
          } else if (code == '3') {
            this.$vux.toast.text($config.loginErrMsg, 'middle')
            this.$router.push({path: '/logout'})
          } else {
            this.$vux.toast.text(msg, 'middle')
          }
        }).catch((err) => {
            console.log(err)
          this.$vux.toast.text($config.errMsg, 'middle')
        })
      },
      handleChecked(index) {
        this.dataObj[index].is_check = !this.dataObj[index].is_check
        if(this.dataObj[index].is_check) {
          this.push_users.push(this.dataObj[index].bid)
        } else {
          this.push_users = removeByValue(this.push_users, this.dataObj[index].bid)
        }
        this.checkall = this.push_users.length == this.dataObj.length
      },
      handleCheckedAll() {
        this.push_users = []
        this.checkall = !this.checkall
        for(let i = 0; i < this.dataObj.length; i++) {
          this.dataObj[i].is_check = this.checkall
          this.push_users.push(this.dataObj[i].bid)
        }
        if(!this.checkall) {
          this.push_users = []
        }
      }
    }
  }
</script>
<style scoped>
  .fiexd-btn{
    height: 1.2rem;
    background: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index:88;
    padding: 0.1rem 0.2rem;
  }
  .filter-yx, .filter-yx>div{
    background: #fff;
    height: 1rem;
    line-height: 1rem;
  }
  .filter-yx .icon{
    font-size: 0.22rem;
    color: #999;
  }
  .search{
    height: 0.9rem;
    padding: 0.1rem 0.25rem;
    background: #fff;
  }
  .search .search-input{
    background: #f5f5f5;
    color: #adadad;
    border-radius: 0.7rem;
    width: 50%;
    line-height: 0.7rem;
    padding: 0rem 0.2rem;
    height: 0.7rem;
  }
  .search .icon-down{
    font-size: 0.22rem;
  }
  .search .search-input .icon{
    font-size: 0.34rem;
  }
</style>
